<template>
	<view style="height: 900rpx">
		<u-navbar title="积分消耗记录" backIconColor="#fff" titleColor="#fff" :background="background"></u-navbar>
		<!-- 表头 -->
		<view class="header-row">
			<view class="header-item" style="color: #8dcdff;">类型</view>
			<view class="header-item" style="color: #8dcdff;">积分</view>
			<view class="header-item" style="color: #8dcdff;">时间</view>
		</view>

		<!-- 滚动下滑列表 -->
		<scroll-view class="scroll-view" @scrolltolower="onScrollToLower" scroll-y="true">
			<!-- 动态渲染列表项 -->
			<view v-for="(item, index) in itemList" :key="index" class="data-row">
				<view class="data-item">{{ item.optionTypeName }}</view>
				<view class="data-item">{{ item.optionValue }}</view>
				<view class="time-item">{{ convertTime(item.createTime) }}</view>
			</view>
			<view class="loading" v-show="isLoading">加载中...</view>
			<u-divider v-show="isLastBottom" color="#fa3534">我也是有底线的~~~</u-divider>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: this.TopColor,
				itemList: [],
				pageSize: 20,
				pageNum: 1,
				isLoading: false,
				isLastBottom: false
			}
		},
		onLoad() {
			this.getData()
		},
		onShow() {
			if (this.itemList == []) {
				this.getData()
			}
		},

		methods: {
			onScrollToLower() {
				// 滚动到底部时触发
				this.getData();
			},
			async getData() {
				this.isLoading = true; // 正在加载
				let logPagePremise = await this.$http.post("/scoreOption/getOptionTypeLogPage", {
					"pageNum": this.pageNum,
					"pageSize": this.pageSize
				})
				const logPage = await logPagePremise
				this.isLoading = false; // 正在加载
				this.pageNum++
				if (logPage.data.list.length == 0) {
					this.isLastBottom = true
				}
				for (let i = 0; i < logPage.data.list.length; i++) {
					this.itemList.push(logPage.data.list[i])
				}
			},
			convertTime(timestamp) {
				const date = new Date(timestamp);

				const year = date.getFullYear();
				const month = ("0" + (date.getMonth() + 1)).slice(-2);
				const day = ("0" + date.getDate()).slice(-2);
				const hours = ("0" + date.getHours()).slice(-2);
				const minutes = ("0" + date.getMinutes()).slice(-2);
				const seconds = ("0" + date.getSeconds()).slice(-2);

				const formattedDate = year + "-" + month + "-" + day;
				const formattedTime = hours + ":" + minutes + ":" + seconds;

				return formattedDate + " " + formattedTime
			}
		}
	}
</script>

<style>
	.scroll-view {
		height: 100%;
		overflow-y: scroll;
	}

	.header-row,
	.data-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 20rpx;
		background-color: #F5F6FA;
	}

	.header-item,
	.data-item {
		flex-basis: 25%;
		color: #333333;
	}

	.header-item,
	.time-item {
		flex-basis: 40%;
		color: #333333;
	}

	/* 添加表头固定样式 */
	.header-row {
		position: sticky;
		top: 10rpx;
		z-index: 1;
	}
</style>